<template>
	<view>
		<custom-head :title="title" :isIcon="isIcon" :navStyle="navStyle">
			<view class="nav" v-if="isSlot">
				<view class="search-box">请输入查询内容</view>
			</view>
		</custom-head>
		
		<view class="row-group">
			<view class="row">
				<view class="left">显示/隐藏 icon</view>
				<view class="right"><switch class="switch" :checked="isIcon" @change="iconChange" /></view>
			</view>
			<view class="row">
				<view class="left">使用自定义插槽</view>
				<view class="right"><switch class="switch" :checked="isSlot" @change="slotChange" /></view>
			</view>
			<view class="row" v-if="!isSlot">
				<view class="left">自定义标题</view>
				<view class="right"><input type="text" v-model="title" placeholder="请输入标题"/></view>
			</view>
			<view class="row">
				<view class="left">自定背景颜色</view>
				<view class="right">navStyle: Object</view>
			</view>
		</view>
		<BottomTips txt="1·自定义导航 主要针对于 小程序" textAlign="left"/>
		<BottomTips txt="2·h5 的导航高 默认 88rpx" textAlign="left"/>
		<BottomTips txt="3·当然作者也兼容了 h5" textAlign="left"/>
	</view>
</template>

<script>
	
	import BottomTips from '@/components/bottom-tips.vue'
	import customHead from '@/components/custom_head.vue'
	export default {
		components:{ customHead,BottomTips },
		data(){
			return{
				navStyle:{
					background: 'linear-gradient(270deg, rgb(136, 93, 255), rgb(123, 162, 255))',
					color: '#fff',
					fontSize: '34rpx'
				},
				title:'',
				isIcon:true,
				isSlot:true
			}
		},
		methods:{
			iconChange(e){
				this.isIcon = e.detail.value
			},
			slotChange(e){
				this.isSlot = e.detail.value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav{flex: 1;display: flex;width: 100%;
		/* #ifdef MP-WEIXIN */
		padding: 0 20rpx;
		/* #endif */
		/* #ifdef H5 */
		padding: 10rpx 20rpx;
		/* #endif */
		.search-box{background: #fff;flex: 1;border-radius: 44rpx;display: flex;align-items: center;padding: 0 20rpx;font-size: 26rpx;color: #999;}
	}
	.row-group{margin-top: 30rpx;
		.row{display: flex;align-items: center;font-size: 30rpx;color: #666;height: 88rpx;padding: 0 25rpx;
			.left{flex: none;}
			.right{flex: 1;margin-left: 20rpx;
				.switch{transform: scale(.8);}
			}
		}
	}
</style>
